<template>
  <div class="register_box">
    <div class="header">
      <img src="../assets/logo.png" alt="">
      <p class="has_count">已有账号?</p>
      <p class="btn" @click="goLogin" style="cursor: pointer;">登陆</p>
    </div>
    <div class="content">
      <div class="title_box">
        <p class="title">欢迎加入招标采购网</p>
        <p class="line"></p>
        <p>每天更新条招标信息,家招标单位.</p>
      </div>
      <div class="progess">
        <p :class="[step==1?'sel':'']">1</p>
        <section>个人账号设置</section>
        <p :class="[step==2?'sel':'']">2</p>
        <section>企业信息设置</section>
        <p :class="[step==3?'right sel':' right']"></p>
      </div>

      <!-- 第一步表单 -->
      <div class="form" v-if="step===1">
        <section class="phone">
          <p class="tit">手机号</p>
          <div class="single">
            <input type="text" v-model="mobile" placeholder="请输入您的手机号">
            <p class="note" v-if="mobileNote">*请填写正确的手机号码，且登陆网站使用此号码注册成功后不可修改</p>
          </div>
        </section>
        <section class="email">
          <p class="tit">邮箱</p>
          <div class="single">
            <input type="text" v-model="email" placeholder="请输入邮箱地址">
            <p class="note" v-if="emailNote">*请输入常用的电子邮箱地址，以方便进行密码找回、接收订阅信息等</p>
          </div>
        </section>
        <section class="pwd">
          <p class="tit">设置密码</p>
          <div class="single">
            <input type="password" v-model="password" placeholder="请输入您的密码">
            <p class="note" v-if="passwordNote">*6-20个字符,可以是任意字符</p>
          </div>
        </section>
        <section class="pwd2">
          <p class="tit">确认密码</p>
          <div class="single">
            <input type="password" v-model="pwd2" placeholder="请再次输入您的密码">
            <p class="note" v-if="pwd2Note">*请保证两次密码输入一致</p>
          </div>
        </section>
        <div class="btn" @click="goNext">下一步</div>
      </div>

      <!-- 第二步表单 -->
      <div class="form from_s" v-if="step===2">
        <section class="phone">
          <p class="tit">企业名称</p>
          <div class="single">
            <input type="text" v-model="enterpriseName" placeholder="请输入您的企业名称">
          </div>
        </section>
        <section class="rname">
          <p class="tit">姓名</p>
          <div class="single ">
            <input v-model="realName" type="text" placeholder="请填写姓名">
          </div>
        </section>
        <section class="pwd2">
          <p class="tit">验证码</p>
          <section class="code_box">
            <div class="single inline_s">
              <input type="text" v-model="captcha" placeholder="请输入您的验证码">
            </div>
            <div class="" style="display:flex;align-items: flex-end;">
              <img :src="captchaImg" alt="" style="width:112px;height:30px;margin-right:9px;">
              <span @click="refresh" style="cursor: pointer;">刷新</span>
            </div>
          </section>
        </section>
        <p class="cbox cbox_f" @click="select($event)">
          <input type="checkbox" id="cbox1" >
          <label for="cbox1">同意<span class="red">《中国招标采购网-易讯招标-中国|招标|招标网|招投标|易讯网|中国最权威的招标信息网站用户服务协议》</span></label>
        </p>
        <p class="cbox" @click="select2($event)">
          <input type="checkbox" id="cbox2" >
          <label for="cbox2">同意接收项目推送邮件</label>
        </p>
        <div class="btn" @click="registerFn">注册</div>
      </div>

      <!-- 第三步表单 -->
      <div class="from_th" v-if="step===3">
        <span class="success">恭喜 注册成功!</span>
        <span >{{count}}s 后自动跳转</span>
      </div>
    </div>

    <!-- 底部特有png -->
    <div class="bottom header">
      底部png
    </div>
  </div>
</template>

<script>
var _uuid='';
import {
  register
} from "@/api/api";
var timer;
export default {
  data(){
    return {
      step:1,
      mobile:"",
      mobileNote:"",
      email:"",
      emailNote:"",
      password:"",
      passwordNote:"",
      pwd2:"",
      pwd2Note:"",
      businessScope:"",
      businessTermEndTime:"",
      businessTermStartTime:"",
      enterpriseName:"",//企业名称
      legalRepresentative:"",
      realName:"",//真实姓名
      registeredCapital:"",
      registrationAuthority:"",
      socialCreditUnifiedCode:"",
      captcha:'',//验证码
      captchaImg:'',//验证码png
      checked1:'',
      checked2:'',
      count:3
    }
  },
  name: 'Register',
  components: {
  },
  methods:{
    select(e){
      this.checked1 = e.target.checked == true?true:false;
    },
    select2(e){
      this.checked2 = e.target.checked == true?true:false;
    },
    refresh(){
      this.captchaImg = 'http://39.107.14.104:8081/api/captcha.jpg?uuid='+_uuid+'&t='+Date.now();
    },
    goNext(){
      // 校验
      this.mobileNote=!(/^[1](([3|5|8][\d])|([4][4,5,6,7,8,9])|([6][2,5,6,7])|([7][^9])|([9][1,8,9]))[\d]{8}$/.test(this.mobile));
      this.emailNote=!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.email));
      this.passwordNote=!(/\S{6,20}$/.test(this.password));
      this.pwd2Note= this.password !== this.pwd2;

      if(this.mobileNote||this.emailNote||this.passwordNote||this.pwd2Note){return}
      this.step =2;
      _uuid = Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
      this.captchaImg = 'http://39.107.14.104:8081/api/captcha.jpg?uuid='+_uuid;
    },
    // 注册
    registerFn(){
      this.emailNote=!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.email));
      this.passwordNote=!(/\S{6,20}$/.test(this.password));
      this.pwd2Note= this.password !== this.pwd2;

      // if(!this.checked1||!this.checked2||this.mobileNote||this.emailNote||this.passwordNote||this.pwd2Note){return}      
      register({
          mobile: this.mobile,
          email: this.email,
          password: this.password,
          enterpriseName: this.enterpriseName,
          realName: this.realName,
          captcha: this.captcha,
          uuid:_uuid
         }).then(res => {
        console.log('register==>注册',res);
        if(res.code==0){
          this.step =3;
          timer = window.setInterval(this.countDown,1000);
        }else{
          alert(res.msg);
        }
      });
    },
    // 倒计时
    countDown(){
      if(this.count == 0){
					//等于0时清除计时
					timer =null;
          this.$router.push('/');
				}else{
					this.count = this.count-1;
        }
    },
    goLogin(){
      this.$router.push('/login');
    }

  }
}
</script>


<style lang="scss" scoped>
  page{
    background-color: #ffffff;
  }
  .register_box{
    background-color: #ffffff;
  }
  .header{display: flex;justify-content: space-between;align-items: center;height: 126px;padding: 0 360px;
    background: -webkit-linear-gradient(top, #58A4D7 0%,#125E97 100%) ;
    // background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a09d), color-stop(100%,#008985))  ;
    // background: -o-linear-gradient(top, #00a09d 0%,#008985 100%) ;
    // background: -ms-linear-gradient(top, #00a09d 0%,#008985 100%) ;

    img{width: 60px;}
    .has_count{flex: 1;text-align: right;margin-right: 21px;color: #ffffff;}
    .btn{width: 143px;height: 51px;line-height: 51px;border-radius: 4px;font-size: 30px;color: #1F659D;background-color: #ffffff;text-align: center;}
  }
  .content{
    width: 863px;
    margin: 0 auto 100px;
  }
  .title_box{
    display: flex;
    align-items: center;
    margin-top: 61px;
  }
  .title{
    font-size: 36px;
    color: #000000;
  }
  .line{
    width: 1px;
    height: 31px;
    background-color: #B7B7B7;
    margin: 0 23px 0 28px ;
  }
  .info{
    font-size: 12px;
  }

  .progess{
    display: flex;
    align-items: flex-start;
    margin-top: 30px;
    .right{
      width: 27px;
      height: 27px;
      background:url(../assets/right.png);
      background-size: 80% 80%;
      background-position: center center;
      background-color: #C4C4C4;
    }
    p{
      width: 27px;
      height: 27px;
      line-height: 27px;
      border-radius: 50%;
      color: #ffffff;
      text-align: center;
      background-color: #C4C4C4;
    }
    section{
      width: 400px;
      line-height: 1.1;
      margin: 0 10px;
      border-bottom: 2px dashed #C3C3C3;
    }
    .sel{
      background-color: #3480B6;
    }
  }

  // 第一步表单
  .form{
    margin-top: 70px;
    text-align: left;
    input{
      padding-left: 17px;
      width: 464px;
      height: 50px;
    }
    section{
      margin-top: 16px;
    }
    .single{
      display: flex;
      p{
        width: 275px;
        margin-left: 36px;
        margin-top: 5px;
      }      
    }
    .code_box{
      display: flex;
      align-items: center;
    }
    .inline_s{
      width: 230px;
      display: inline-block;
      margin-right: 20px;
      input{
        width: 207px;
      }
    }
    .flex{
      display: flex;
    }
    .tit{
        font-size: 18px;
        margin-bottom: 4px;
    }
    
    .btn{
      cursor: pointer;
      font-size: 24px;
      width: 481px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      margin-top: 20px;
      color: #ffffff;
      background-color: #E6BA61;
    }
  }

  // 第二步表单
.cbox{
  input{
    width: auto;
    height: auto;
        margin-right: 5px;
  }
  .red{
    color: red;
  }
}
.cbox_f{
  margin: 32px  0 8px;
}

// 第三步表单
.from_th{
  margin-top: 153px;
  text-align: center;
  .success{
    font-size: 36px;
    color: #333333;
    margin-right: 23px;
    text-decoration: none;
  }
  span{
    font-size: 18px;
    color: #3480B6;
    text-decoration: underline;
  }
}
</style>